<template>
  <div class="container">
    <el-row style="margin-bottom: 10px;">
      <el-col :span="12">
        <div style="display: flex;align-items: center">
          <div style="flex-shrink: 0">分类搜索：</div>
          <el-input v-model="keyword" clearable  placeholder="请输入分类名称...">
            <el-button slot="append" icon="el-icon-search" @click="examSearchs"></el-button>
          </el-input>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="16">
      <el-col span="12">
        <!-- 联级选择器 -->
        <div style="display: flex;align-items: center;">
          <div style="flex-shrink: 0">分类搜索：</div>
          <!-- <Cascader
            :data="Catelist"
            trigger="hover"
            @on-change="CascaderChange"
            v-model="Catevalue"
          />-->
          <el-select v-model="CateChildId" filterable>
            <el-option
              v-for="(item,index) in Catelist"
              :key="index"
              :value="item.id"
              :label="item.ptitle+'>>>'+item.title"
            ></el-option>
          </el-select>
          <el-button type="primary" style="margin-left: 10px ;" @click="addRelateCate()">添加</el-button>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-table border :columns="TableColumns" :data="relateList" :loading="loading">
          <el-table-column label="ID" #default="{row}" align="center">{{row.cateId}}</el-table-column>
          <el-table-column label="分类名称" #default="{row}" align="center">{{row.title}}</el-table-column>
          <el-table-column label="操作" #default="{row}" fixed="right">
            <a @click="del(row)">删除</a>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col span="24">
        <div class="acea-row row-right page">
          <el-pagination
            :total="total"
            show-elevator
            show-total
            @current-change="pageChange"
            :page-size="page.limit"
            :current-page="page.page"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getSecondCateListApi } from '@/api/onsite';
import { getCompanyRelateListApi, baseCompanyRelateSaveApi, baseCompanyRelatedelApi } from '@/api/base';
export default {
  props: {
    company_id: 0,
  },
  data() {
    return {
      loading: false,
      Catevalue: [], //联级value
      Catelist: [], //分类列表
      CateId: null, //一级分类id
      CateChildId: null, //二级分类id、
      relateObj: {}, //关联ID
      relateList: [], //关联列表
      total: 0,
      page: {
        page: 1,
        limit: 10,
      },
      keyword: '',
      TableColumns: [
        {
          title: 'ID',
          key: 'id',
          align: 'center',
        },
        {
          title: '分类名称',
          key: 'title',
          align: 'center',
        },
        {
          title: '操作',
          slot: 'action',
          fixed: 'right',
        },
      ],
    };
  },
  created() {},
  mounted() {
    console.log('打开列表');
    this.getCateList();
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      let that = this,
        data = {};
      data.companyId = that.company_id;
      data.page = that.page.page;
      data.limit = that.page.limit;
      data.title = that.keyword;
      getCompanyRelateListApi(data)
        .then((res) => {
          that.relateList = res.list;
          that.total = res.total;
          this.loading = false;
        })
        .catch((res) => {});
    },
    // 获取分类
    getCateList() {
      let that = this,
        list = [];
      getSecondCateListApi()
        .then((res) => {
          console.log(res.data);
          that.Catelist = res;
        })
        .catch((res) => {});
    },
    // 联级列表
    CascaderChange: function (val) {
      let cateId, cateChildId, companyID;
      cateId = val[0];
      cateChildId = val[1];
      companyID = this.company_id;
      let obj = {
        cate_id: cateChildId,
        company_id: companyID,
      };
      this.relateObj = this.company_id;
    },
    // 关联分类
    addRelateCate() {
      if(!this.CateChildId){
        return this.$message.error('请选择分类')
      }
      let data = {
        cateId: this.CateChildId,
        companyId: this.company_id,
      };
      baseCompanyRelateSaveApi(data)
        .then((res) => {
          this.$message.success('操作成功');
          this.getList();
        })
      
    },
    // 删除
    del(row) {
      let that = this;
      that.$confirm('删除', '是否确认删除？').then(() => {
        baseCompanyRelatedelApi({ id: row.id })
          .then((res) => {
            that.$message.success('删除成功');
            that.getList();
          })
          .catch((res) => {
            that.$message.error('删除失败');
          });
      });
    },
    clearInput() {
      this.getList();
    },
    // 搜索方法
    examSearchs() {
      this.page.page = 1;
      this.getList();
    },
    // 分页
    pageChange(index) {
      this.page.page = index;
      this.getList();
    },
  },
};
</script>

<style scoped>
</style>